<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="10">
          <NewCard title="个人信息">
            <div class="userInfo">
              <ul>
                <!-- <li class="uploadBox">
                  <div class="infoLabel">
                    <img :src="avatar" class="portrait" />
                  </div>
                  <div class="infoContent">
                   <el-upload
                      class="avatar-uploader"
                      action="#"
                      :show-file-list="false"
                    >
                      <p class="upLoadBtn">上传头像</p>
                    </el-upload>
                  
                  </div>
                </li> -->
                <UserAvatar :user="userInfo" />
                <li>
                  <div class="infoLabel">用户ID</div>
                  <div class="infoContent">
                    {{ userInfo.userId }}
                    <el-button type="text" @click="clickWriteOff">注销</el-button>
                  </div>
                </li>
                <li style="margin-bottom: 20px">
                  <div class="infoLabel">用户姓名</div>
                  <div class="infoContent">
                    <el-input
                      v-model="userInfo.nickName"
                      placeholder="请输入用户姓名"
                    ></el-input>
                  </div>
                </li>
                <li>
                  <div class="infoLabel">职位</div>
                  <div class="infoContent">
                    <el-input
                      v-model="userInfo.postion"
                      placeholder="请输入职位"
                    ></el-input>
                  </div>
                </li>
                <li class="setTelOrEmail">
                  <div class="infoLabel">手机号</div>
                  <div class="infoContent">
                    {{ userInfo.phonenumber }}
                    <i class="el-icon-edit-outline" @click="setTel"></i>
                  </div>
                </li>
                <li class="setTelOrEmail">
                  <div class="infoLabel">邮箱</div>
                  <div class="infoContent">
                    {{ userInfo.email }}
                    <i class="el-icon-edit-outline" @click="setEmail"></i>
                  </div>
                </li>
                <li class="setTelOrEmail">
                  <div class="infoLabel">密码</div>
                  <div class="infoContent">
                    ******
                    <i class="el-icon-edit-outline" @click="setPassword"></i>
                  </div>
                </li>
              </ul>
              <div class="userInfoBtn">
                <el-button round>取消</el-button>
                <el-button round class="addBtn" @click="saveFn">保存</el-button>
              </div>
            </div>
          </NewCard>
        </el-col>
        <el-col style="height: 100%" :span="14">
          <div style="height: 100%" v-if="isclick">
            <FeaturedContent style="height: 100%"></FeaturedContent>
          </div>
          <div v-else class="setTelOrEmail">
            <SetTelOrEmail
              @EventSucess="isclick = true"
              :setTOrE.sync="setTOrE"
              :isSetPwd="isSetPwd"
              @changeEtTOrE="
                (bln) => {
                  setTOrE = bln;
                }
              "
            ></SetTelOrEmail>
          </div>
        </el-col>
      </el-row>
      <el-dialog
        title="用户注销"
        :visible.sync="isLogoutShow"
        width="30%"
        custom-class="logoutClass">
        <!-- 验证码验证通过后才能注销 -->
        <div class="codeVrifyBox">
          <p><i class="el-icon-error"></i>此操作将永久删除该账号, 请谨慎操作！</p>
          <el-input
            @input="verifyCodeFn"
            v-model="inputCode"
            placeholder="请输入手机验证码">
            <el-button slot="suffix">
              <span
                @click="obtainVerifyCode"
                :style="{
                  color: verifyContent.disabled ? 'grey' : '#f87a23',
                  cursor: verifyContent.disabled ? 'unset' : 'pointer',
                }">
                {{ verifyContent.text }}
              </span></el-button>
          </el-input>
        </div>
        <!-- 按钮区 -->
        <span slot="footer" class="dialog-footer userInfoBtn">
          <el-button round @click="isLogoutShow = false">取 消</el-button>
          <el-button type="primary" round class="addBtn" :disabled="!isPass" @click="clickLogout">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </main>
</template>

<script>
import { getUserProfileApi,editUserUpdateUserNameApi } from "@/BMViews/api/user/profile.js";
import FeaturedContent from "@/components/FeaturedContent/index.vue";
import { mapGetters } from "vuex";
import SetTelOrEmail from "./setTelOrEmail.vue";
import NewCard from "@/wss/components/newCard.vue";
import UserAvatar from "./userAvatar.vue";

import {deleteCancellationApi} from "@/BMViews/api/login.js"

import debounce from "lodash/debounce";
import {
  getEmailCodeApi,
  getVerificationMailCodeApi,
  getOrderListApi,
  getVerificationCodeApi,
} from "@/BMViews/api/login.js";
export default {
  name: "UserSetting",
  components: { NewCard, SetTelOrEmail, FeaturedContent, UserAvatar },
  data() {
    return {
      isclick: true,

      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", //头像
      nickName: "张三", //姓名
      position: "财务", //职位
      setTOrE: '1', //当前是1修改手机号还是2修改邮箱3修改密码

      isSetPwd: false,// 当前状态是修改密码

      isLogoutShow: false,//注销对话框显示隐藏
      inputCode: '',//输入的验证码
      // 获取验证码按钮
      verifyContent: {
        disabled: false,
        text: "获取验证码",
        time: 60,
      },
      isPass: false,//验证是否通过
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  watch: {
    setTOrE() {
      console.log("chulai");
    },
  },
  methods: {
    // 保存
    async saveFn() {
      //判断是否包含特殊字符
      let reg = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
      if(!reg.test(this.userInfo.nickName)){
        this.$message({type: "warning",message: '用户姓名不能包含特殊字符！',});
        return
      }

      // nickName: this.userInfo.nickName,
      let obj = {
        postion: this.userInfo.postion,
        userId: this.userInfo.userId,
      };
      await this.editUserUpdateUserName(this.userInfo.nickName) //修改名字
      let { code, msg } = await getUserProfileApi(obj);
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg,
      });
    },

    // 修改名字的接口
    async editUserUpdateUserName(name){
      let result = await editUserUpdateUserNameApi(name)
      if(result.code!=200) return
    },

    // -----------------------------------------------注销账户--------------------------------------------
    // 验证验证码
    async verifyCodeFn() {
      if (this.inputCode == "" || this.inputCode.length != 4) return;
      let { code } = await getVerificationCodeApi({
        code: this.inputCode,
        mobile: this.$store.state.user.phonenumber,
      });
      if (code != 200) return;

      this.isPass = true;
    },

    // 发送验证码
    obtainVerifyCode: debounce(async function (params) {
      if (this.verifyContent.disabled) return;
      const phonenumber = this.$store.state.user.phonenumber
      // 防抖

      var self = this;
      if (self.verifyContent.disabled) {
        return;
      }
      if (self.validePhone(phonenumber)) {
        // 发送短信接口请求
        let { code } = await getOrderListApi(phonenumber);
        if (code != 200) return;
        self.countDown();
        this.$message({
          type: "success",
          message: "已发送",
        });
      }
    }, 50),

    // 验证手机号
    validePhone(phonenumber) {
      // console.log(!/^1[3456789]\d{9}$/.test(phonenumber));
      if (["", null, undefined].includes(phonenumber)) {
        this.$message({
          type: "warning",
          message: "请输入手机号",
        });
        return false;
      } else if (!/^1[3456789]\d{9}$/.test(phonenumber)) {
        this.$message({
          type: "warning",
          message: "请输入正确的手机号码",
        });
        return false;
      } else {
        return true;
      }
    },

    // 倒计时方法
    countDown() {
      var time = 60;
      this.verifyContent.disabled = true;
      this.verifyContent.text = `重新获取(${time}s)`;
      var timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.verifyContent.disabled = false;
          this.verifyContent.text = "获取验证码";
        } else {
          this.verifyContent.disabled = true;
          this.verifyContent.text = `重新获取(${time}s)`;
          time--;
          // this.verifyContent.time--;
        }
      }, 1000);
    },

    // 点击注销账户
    clickWriteOff(){
      this.isLogoutShow = true //打开对话框
      // this.$confirm("此操作将永久删除该账号, 是否继续?", "注销账号提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "error",
      // }).then(async () => {
      //   await this.deleteCancellation() // 注销账号的接口
      //   this.$store.dispatch("LogOut").then(() => {
      //     this.$store.commit("SET_TOPBAR_ROUTES", []);
      //     this.$router.push("/Bm-personalCenter/login");
      //   });
      // }).catch(() => {

      // });
    },

    // 点击确认注销
    clickLogout: debounce(async function () {
      await this.deleteCancellation() // 注销账号的接口
      this.isPass = false;
      this.$store.dispatch("LogOut").then(() => {
        this.$store.commit("SET_TOPBAR_ROUTES", []);
        this.$router.push("/Bm-personalCenter/login");
      });
    },500),

    // 注销账号的接口
    async deleteCancellation(){
      let result = await deleteCancellationApi()
      if(result.code==200) {
        this.$message({message: '当前登录账号已注销！',type: 'success'});
      }
    },
    // -----------------------------------------------注销账户--------------------------------------------end

    //点击修改手机号
    setTel() {
      this.setTOrE = '1';
      this.isclick = false;
      this.isSetPwd = false //当前不是修改密码
    },

    //点击修改邮箱
    setEmail() {
      this.setTOrE = '2';
      this.isclick = false;
      this.isSetPwd = false //当前不是修改密码
    },

    //点击修改密码
    setPassword(){
      this.setTOrE = '3';
      this.isclick = false;
      this.isSetPwd = true //当前是修改密码
    },
  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .el-card__body {
  position: relative;
  padding: 0 30px;
}
::v-deep .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd30 {
  padding: 0 30px;
}

/* 个人信息 */
.userInfo {
  padding: 20px 0 80px 0;
}
.userInfo ul > li {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.userInfo ul > li.uploadBox {
  margin-bottom: 30px;
}
.userInfo .infoLabel {
  width: 130px;
  font-size: 14px;
  color: #666;
}
.userInfo .portrait {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.userInfo .infoContent {
  flex-grow: 1;
  font-size: 14px;
  color: #222;
}
.userInfo .infoContent>.el-button{
  color: #999;
  font-size: 14px;
  margin-left: 10px;
}
.userInfo .infoContent .upLoadBtn {
  font-size: 14px;
  color: #f87a23;
}

.userInfo .setTelOrEmail .infoContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.userInfo .setTelOrEmail .infoContent > i {
  font-size: 18px;
  color: #f87a23;
  cursor: pointer;
}

.userInfoBtn {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 10px 30px;
  border-top: 1px solid #ecedf0;
  background-color: #fff;
}
.userInfoBtn .el-button {
  padding: 0;
  width: 110px;
  padding: 10px 0;
  font-weight: bold;
  color: #999;
}
.userInfoBtn .el-button.addBtn {
  border-color: #f87a23;
  background-color: #f87a23;
  color: #fff;
}
.userInfoBtn .el-button:hover {
  border-color: #f87a23;
  color: #f87a23;
  background-color: transparent;
}
.userInfoBtn .el-button.addBtn:hover {
  border-color: #f87a23;
  background-color: #f87a23;
  color: #fff;
  opacity: 0.9;
}

/* 注销对话框 */
::v-deep .logoutClass{
  display: flex;
  flex-direction: column; 
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 60px);
  max-width: calc(100% - 60px);
}
::v-deep .logoutClass .el-dialog__footer{
  border-top: 1px solid #ecedf0;
  padding: 0;
}
::v-deep .logoutClass .el-dialog__body{
  padding-top: 15px;
}
.codeVrifyBox p{
  margin: 0;
  padding-bottom: 15px;
}
.codeVrifyBox p>i{
  color: #f56c6c;
  font-size: 16px;
  margin-right: 5px;
}
.codeVrifyBox >>> .el-input__inner{
  height: 46px;
  line-height: 46px;
}
::v-deep .logoutClass .el-input button{
  position: relative;
  border: 0;
  padding: 10px 20px;
  margin-top: 7px;
  color: #f87a23;
  font-size: 14px;
}
::v-deep .logoutClass .el-input button:hover{
  background-color: transparent;
}
::v-deep .logoutClass .el-input button::before{
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  height: 12px;
  background-color: #d3d3d3;
}
.dialog-footer{
  border-top: 0;
  position: inherit;
}

@media (max-width: 1120px) {
  .userInfoBtn{
    padding: 10px 30px
  }
  .userInfo .infoLabel{
    width: 90px;
  }
  .userInfoBtn .el-button{
    width: 80px;
    padding: 6px 0;
  }
}
</style>